<template>
    <div class="page" data-page="checkPointDetail" style="z-index: 2;">
        <div class="navbar">
            <div class="navbar-inner sliding">
                <div class="left" @click=$root.backToTab()>
                    <a href="#" class="link">
                        <i class="icon icon-back"></i>
                        <span class="ios-only">Back</span>
                    </a>
                </div>
                <div id="check_pointName" class="title">巡检点位详情</div>
                <div class="right" style="width: 56px">

                </div>
            </div>
        </div>

        <div class="page-content infinite-scroll-content ptr-content " data-infinite-distance="30" @infinite="loadMoreRecordsList">
            <img style="width: 100%;height: 160px;" id="show_pointImg">
            <div class="divide-gray"></div>
            <div class="form-hiddenDanger">
                <div class="rdsp-inner-title"><span>点位基本信息</span>
                    <div class="right-jt"><i class="iconfont icon-xiala"></i></div>
                </div>
                <div class="rdsp-inner-content">
                    <div class="hiddenDanger-block">
                        <div class="left-title fl" style="font-weight: normal;">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称</div>
                        <div class="right-con  has-arrow">
                            <div class="right-select right-datail" style="text-align: left;" id="point-name">-</div>
                        </div>
                    </div>
                </div>
                <div class="rdsp-inner-content">
                    <div class="hiddenDanger-block">
                        <div class="left-title fl" style="font-weight: normal;">责&nbsp;&nbsp;任&nbsp;&nbsp;人</div>
                        <div class="right-con  has-arrow">
                            <div  class="right-select right-datail" style="text-align: left;" id="point-person">-</div>
                        </div>
                    </div>
                </div>
                <div class="rdsp-inner-content">
                    <div class="hiddenDanger-block">
                        <div class="left-title fl" style="font-weight: normal;">联网单位</div>
                        <div class="right-con  has-arrow">
                            <div  class="right-select right-datail" style="text-align: left;" id="point-unit">-</div>
                        </div>
                    </div>
                </div>
                <div class="rdsp-inner-content">
                    <div class="hiddenDanger-block">
                        <div class="left-title fl" style="font-weight: normal;">具体位置</div>
                        <div class="right-con  has-arrow">
                            <div  class="right-select right-datail" style="text-align: left;" id="point-position1">-</div>
                        </div>
                    </div>
                </div>
                <div class="rdsp-inner-content">
                    <div class="hiddenDanger-block">
                        <div class="left-title fl" style="font-weight: normal;">创建时间</div>
                        <div class="right-con  has-arrow">
                            <div class="right-select right-datail" style="text-align: left;" id="point-creatTime1">-</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="divide-gray"></div>
            <div class="form-hiddenDanger">
                <div class="rdsp-inner-title"><span>巡检内容</span>
                    <div class="right-jt"><i class="iconfont icon-xiala"></i></div>
                </div>
                <div class="rdsp-inner-content" id="inspect-point-contant">
                    <!-- <div class="hiddenDanger-block">
                        <div class="left-title fl pointDetail-contant-no">1、</div>
                        <div class="right-con  has-arrow" style="margin-left: 48px;">
                            <div id="" class="" style="text-align: left;">检查内容检查内容检查内容检查内容检查内容检查内容检查内容检查内容检查内容检查内容检查内容检查内容检查内容检查内容</div>
                        </div>
                    </div>
                    <div class="hiddenDanger-block">
                        <div class="left-title fl pointDetail-contant-no">2、</div>
                        <div class="right-con  has-arrow" style="margin-left: 48px;">
                            <div id="" class="" style="text-align: left;">检查内容检查内容检查内容检查内容检查内容检查内容检查内容检查内容检查内容检查内容检查内容检查内容检查内容检查内容</div>
                        </div>
                    </div> -->
                </div>
            </div>
            <div class="divide-gray"></div>
             <div  class="form-hiddenDanger" >
                <div class="rdsp-inner-title"><span>点位巡检记录</span>
                    <div class="right-jt"><i class="iconfont icon-xiala"></i></div>
                </div>
                <div class="rdsp-inner-content">
                <ul id="point-inspect-records">
                   <!--  <li class="point-li" >
                        <div class="item-inner">
                        <div class="item-title-row" style="padding-right: 0;">
                          <div class="item-title">
                              <div class='rdsp-icon point-finish'>完成</div>
                              <div class="decter-name">2018-11-13 20:11</div>
                          </div>
                        </div>
                        <div class="item-subtitle decter-belong-unit point-type"><span class="point-typeName">所属计划</span><span style="color: #333333;">计划名称</span></div>
                        <div class="item-subtitle decter-belong-unit point-type" ><span class="point-typeName">巡检结果</span><span style="color: #333333;">全部合格</span></div>
                      </div>
                    </li>
                     <li class="point-li">
                        <div class="item-inner">
                        <div class="item-title-row" style="padding-right: 0;">
                          <div class="item-title">
                              <div class='rdsp-icon point-unfinish'>未完成</div>
                              <div class="decter-name">2018-11-13 20:11</div>
                          </div>
                        </div>
                        <div class="item-subtitle decter-belong-unit point-type"><span class="point-typeName">所属计划</span><span style="color: #333333;">计划名称</span></div>
                        <div class="item-subtitle decter-belong-unit point-type"><span class="point-typeName">巡检结果</span><span style="color: #333333;">全部合格</span></div>
                      </div>
                    </li> -->
                </ul>
                <div id="point_preloader" class="preloader infinite-scroll-preloader"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    return {
        mounted() {
            var self = this;
            var app = self.$app;
             
        },
        data: function () {
            return {
                listIndex:0,
                listSize:5,
            }
        },
        methods: {
             //列表数据
            getmoreRecordsData: function () {
                var self = this;
                var $ = self.$$;
                Dao.getTaskPointInfoByVisualCode({
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    account:userInfor.accountName,
                    visualCode:self.$route.params.visualCode,//self.$route.params.visualCode
                    pageIndex: self.listIndex,
                    pageSize: self.listSize
                }, function (data) {
                    var datalist = data.historyList;
                    var pointList=data.contentList;
                    if(self.listIndex==0){
                        if (data.picUrl != null && data.picUrl != ""){
                             $("#show_pointImg").attr('src','');
                             $("#show_pointImg").attr('src',data.picUrl);
                        } else {
                            $("#show_pointImg").hide();
                        }
                        $("#point-name").html(common.transNullundefinedToline(data.pointName));
                        $("#point-person").html(common.transNullundefinedToline(data.dutyMan));
                        $("#point-unit").html(common.transNullundefinedToline(data.orgName));
                        $("#point-position1").html(common.transNullundefinedToline(data.address));
                        $("#point-creatTime1").html(common.transNullundefinedToline(data.createTime));
                        $("#inspect-point-contant").empty();
                        for (var i = 0; i < pointList.length;i++) {
                            var num=i+1;
                            $("#inspect-point-contant").append(`<div class="hiddenDanger-block">
                                    <div class="left-title fl pointDetail-contant-no">`+num+`、</div>
                                    <div class="right-con  has-arrow" style="margin-left: 48px;">
                                        <div id="" class="" style="text-align: left;">`+common.transNullundefinedToline(pointList[i].content)+`</div>
                                    </div>
                                </div>`);
                        }
                    }
                    if (datalist&&datalist.length > 0) {
                        if(data.length < self.listSize){
                            $('#dector_preloader').hide();
                            self.allowInfinite=false;
                        }else{
                            $('#dector_preloader').show();
                            self.allowInfinite=true;
                        }
                        for (var i = 0; i < datalist.length;i++) {
                            var isComplete="";
                            var isQualified=""; 
                            if(datalist[i].status==4){
                                isComplete="<div class='rdsp-icon point-finish'>完成</div>";
                                if(datalist[i].qualified==1){
                                    isQualified="<div class='item-subtitle decter-belong-unit point-type' ><span class='point-typeName'>巡检结果</span><span style='color:#A0CF6A;'>合格</span></div>";
                                }else if(datalist[i].qualified==2){
                                    isQualified="<div class='item-subtitle decter-belong-unit point-type' ><span class='point-typeName'>巡检结果</span><span style='color:#F8B728;'>部分合格</span></div>";
                                }else{
                                    isQualified="<div class='item-subtitle decter-belong-unit point-type' ><span class='point-typeName'>巡检结果</span><span style='color: #FF292C;'>全部不合格</span></div>";  
                                }
                            }else{
                                isComplete="<div class='rdsp-icon point-unfinish'>未完成</div>";
                            }
                            $("#point-inspect-records").append(`<li class="point-li" >
                                <div class="item-inner">
                                <div class="item-title-row" style="padding-right: 0;">
                                  <div class="item-title">`+isComplete+`
                                      <div class="decter-name">`+common.transNullundefinedToline(datalist[i].publishTime)+`</div>
                                  </div>
                                </div>
                                <div class="item-subtitle decter-belong-unit point-type"><span class="point-typeName">巡检人</span><span style="color: #333333;">`+common.transNullundefinedToline(datalist[i].inspectPersonAccount)+`</span></div>
                                `+isQualified+`
                              </div>
                            </li>`);
                        }
                        
                        
                    } 

                });
            },
            loadMoreRecordsList: function () {
                var self = this;
                var $ = self.$$;
                if (self.allowInfinite){
                    setTimeout(function () {
                        self.listIndex++;
                        self.getmoreRecordsData();
                    }, 500);
                }
            },
        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                var $ = self.$;
                jQuery(".form-hiddenDanger .rdsp-inner-title").click(function(e) {
                       jQuery(e.currentTarget).parent().toggleClass("show");
                       jQuery(e.currentTarget).siblings(".rdsp-inner-content").slideToggle();
                });
                self.getmoreRecordsData();
            },
            pageBeforeIn: function(e, page) {
                var self = this;
                var $ = self.$$;
            },
        },
}
</script>

<style scoped>
    .point-li{
        padding-left: 28px;
        padding-top: 8px;
    }
    .point-unfinish{
        background-color:#999999;
        width:37px;
        text-align: center;
        float: left;
    }
    .point-typeName{
        color: #888;
        margin-right: 10px;
    }
    .point-type{
        margin-top: 8px;
        margin-bottom: 8px;
        color: #888;
    }
    .point-finish{
        background-color:#77BE07;
        width:37px;
        text-align: center;
        float: left;
    }
    .pointDetail-contant-no{
        font-weight: normal;
        width: 48px;
        margin-left:0px;
        text-align: right;
        color:#333333;
    }
    .navbar .right {
        margin-left: 0;
        margin-right: 0px;
    }
    .my-item-title{
        min-width: 0;
        -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
        flex-shrink: 1;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .list .item-inner:after{
        height: 0px!important;
    }
    .point-details{
        font-family: HiraginoSansGB-W3;
        font-size: 12px;
        line-height: 1.58;
        color: #666666;
        padding: 20px 0;
        width: 100%;
    }

</style>